<template>
  <div class="datasource-wrapper">
    <div class="datasource-switcher-wrapper">
      <div class="datasource-label">数据表</div>
      <!--          <b-select model-value="test_datasource" size="mini">-->
      <!--              <b-option value="test_datasource" label="探索空间"></b-option>-->
      <!--          </b-select>-->
    </div>
    <div class="datasource-table-search">
      <a-input-search placeholder="搜索数据表/文件" type="text" allow-clear v-model="keyword" />
    </div>
    <a-spin dot :loading="tableListLoading" class="h-[93%]">
      <a-tabs type="text" v-model="activeTab" default-active-key="model" justify @change="tabChange">
        <a-tab-pane key="model" title="原始表">
          <node-list
            style="height: 100%"
            :data="tableList.filter((v) => !v.is_view)"
            :all-node-title="allNodeTitle"
            :root-node="stateTree"
            :loading="tableListLoading"
            @start="handleDragStart"
            @end="handleDragEnd"
          />
        </a-tab-pane>
        <a-tab-pane key="files" title="视图">
          <a-button type="text" @click="isEditView = !isEditView">新建视图</a-button>
          <node-list
            style="height: 100%"
            :data="tableList.filter((v) => v.is_view)"
            :all-node-title="allNodeTitle"
            :root-node="stateTree"
            :loading="tableListLoading"
            @start="handleDragStart"
            @end="handleDragEnd"
          />
        </a-tab-pane>
      </a-tabs>
    </a-spin>
    <!--    <a-drawer v-model:visible="isEditView" width="40%" title="新建视图">-->
    <!--      <cube-table-view v-model:visible="isEditView" />-->
    <!--    </a-drawer>-->
  </div>
  <a-drawer v-if="isFiles" v-model="isFiles" width="40%" title="上传文件">
    <a-upload
      action="http:////datav.mtgshenghuo.com/admin/model/readexcel"
      multiple
      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
      type="drag"
    >
      <div style="padding: 20px 0; border: 1px dashed #eee; cursor: pointer" flex="dir:top main:center cross:center">
        <p>
          <a-icon name="cloud-upload" size="52" style="color: #3399ff" />
        </p>
        <p>请点击选择对应文件上传，csv或xlsx</p>
      </div>
    </a-upload>
  </a-drawer>
  <cube-table-view v-model:visible="isEditView" />
</template>

<script setup>
import NodeList from "@/components/Service/LinkNode/node-list.vue"
import { computed, inject, ref, watch } from "vue"
import { useToggle } from "@vueuse/core"
import CubeTableView from "@/views/datasource/cube/components/cube-table-view.vue"
import tool from "@/utils/tool.js"

const [isFiles] = useToggle()
const BiCube = inject("BiCube", {})
const allNodeTitle = computed(() => BiCube.schemaStatus.flatState.value.map((v) => v.node.title))
const stateTree = computed(() => BiCube.schemaStatus.stateTree.value)
const tableList = computed(() => {
  return BiCube.schemaStatus.tableList.value
})
const tableListLoading = computed(() => BiCube.schemaStatus.tableListLoading.value)
const keyword = ref("")
const activeTab = ref("files")

const handleDragStart = () => {
  BiCube.schemaStatus.dragging.value = true
}
const handleDragEnd = () => {
  BiCube.schemaStatus.dragging.value = false
}
watch(keyword, (val) => {
  BiCube.schemaStatus.tableList.value = tool.searchEvent(
    val,
    BiCube.schemaStatus.tableList.value,
    ["tableName", "table_comment"],
    "cubeTable"
  )
})
const tabChange = (val) => {
  activeTab.value = val
  if (val === "files") {
    isFiles.value = !isFiles.value
  }
}

const isEditView = ref(false)
</script>

<style scoped lang="less">
.datasource-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: #fafafa;
  padding-bottom: 10px;
  padding-top: 20px;

  .datasource-switcher-wrapper {
    position: relative;
    padding: 0 10px;

    .datasource-label {
      margin-bottom: 10px;
      opacity: 0.45;
    }
  }

  .datasource-table-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0 10px;

    > input {
      background-color: #fafafa;
      border: none;
      width: 185px;
      outline: none;
      height: 32px;
      padding: 4px 0 4px 5px;
      color: #262626;
      font-size: 12px;
      line-height: 32px;
    }
  }

  .datasource-content-list {
    color: #313132;
    padding: 5px;
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0;
  }
}
</style>
